import * as echarts from 'echarts';
import { Component } from 'react';

class LineChart extends Component {
  componentDidMount() {
    // 基于准备好的dom，初始化echarts实例
    let myChartId: HTMLElement = document.getElementById('lineChart')!;
    let myChart = echarts.init(myChartId);
    // 绘制图表
    myChart.setOption({
      title: {
        text: '阴影部分颜色渐变'
      },
      tooltip: {},
      legend: {
        data: ['销量']
      },
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'line',
          data: [20, 30, 46, 46, 46, 30],
          areaStyle: {
            color: {
              // type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#FF6600' // 0% 处的颜色
              }, {
                // offset: 0.5, color: '#FFFFFF' // 100% 处的颜色 
                offset: 1, color: '#FFFFFF' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          }
        }
      ]
    });
  }
  render() {
    return (
      <div id="lineChart" style={{ width: '650px', height: '350px' }}></div>
    )
  }
}

export default LineChart;
